<template>
  <div>
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
  <el-breadcrumb-item>宠物品种</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin-top:20px">
    <el-row>
        <el-col><el-button type="primary" @click="showAddDialog">添加宠物品种</el-button></el-col>
    </el-row>
    <!-- 表格 -->
    <tree-table class="treeTable" :data="catesList" :columns="columns" :selection-type="false" 
    :expand-type="false" border index-text="#" show-index>
       <!-- 是否有效 -->
        <template slot="isok">
          <i class="el-icon-success" v-if="true" style="color: lightgreen;"></i>
          <i class="el-icon-error" v-else style="color: red;"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" >
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
    </tree-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 4, 6, 8,10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
<el-dialog title="添加分类" :visible.sync="dialogAddFormVisible" width="30%" @close="clearAddForm">
  <el-form :model="addCateForm" :rules="addCateFormRule" ref="addCateFormRef">
    <el-form-item label="分类名称：" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
    <el-form-item label="父级分类:"  >
    <el-cascader
    expand-trigger="hover" 
    @change="parentCateChange"
    v-model="selectedKeys"
    :options="parentCatesList"
    :props="cascaderProps"
    change-on-select
    clearable
  ></el-cascader>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAddFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import request from '../../api/index'
export default {
    name:'Cate1',
    data(){
        return{
        catesList:[],
        queryInfo:{
            type:3,
            pagenum:1,
            pagesize:2
        },
        total:0,
        columns:[
            {label:'分类名称',prop:'cat_name'},
            {label:'是否有效',prop:'',type:'template',template:'isok'},
            {label:'排序',prop:'',type:'template',template:'order'},
            {label:'操作',prop:'',type:'template',template:'opt'}
        ],
        dialogAddFormVisible:false,
          addCateForm: {
        // 将要添加的分类的名称
        cat_name: '',
        // 父级分类的Id
        cat_pid: 0,
        // 分类的等级，默认要添加的是1级分类
        cat_level: 0
      },
      addCateFormRule:{cat_name:[{require:true,message: '请输入分类名称', trigger: 'blur' }]},
      parentCatesList:[],
      cascaderProps:{
          value:'cat_id',
          label:'cat_name',
          children:'children'
      },
    selectedKeys: []
    }},
    created(){
        this.getCatesList()
    },
    methods:{
       async getCatesList(){
           const {data:res}=await request({url:'/categories',method:'get',params:this.queryInfo});
            if(res.meta.status!==200){
                return this.$message.error("获取商品失败！");
            }
            this.catesList=res.data.result
            this.catesList=[
              {
                cat_id:1,
                cat_level:0,
                cat_name:"猫",
                cat_pid:0,
                children:[
                  {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"缅因",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"布偶",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"英国矮脚猫",
                    cat_pid:1,
                    children:[
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"金渐层",
                        cat_pid:1,
                      },
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"银渐层",
                        cat_pid:1,
                      },
                    ]
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"美国短腿猫",
                    cat_pid:1,
                    children:[
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"虎斑猫",
                        cat_pid:1,
                      },
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"蓝猫",
                        cat_pid:1,
                      },
                    ]

                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"加菲猫",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"无毛猫",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"波斯猫",
                    cat_pid:1
                  },
                ]
              },
               {
                cat_id:1,
                cat_level:0,
                cat_name:"狗",
                cat_pid:0,
                children:[
                  {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"柯基",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"柴犬",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"雪橇犬",
                    cat_pid:1,
                    children:[
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"阿拉斯加",
                        cat_pid:1,
                      },
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"萨摩耶",
                        cat_pid:1,
                      },
                       {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"哈士奇",
                        cat_pid:1,
                      },
                    ]
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"小型犬",
                    cat_pid:1,
                    children:[
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"泰迪",
                        cat_pid:1,
                      },
                      {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"波比",
                        cat_pid:1,
                      },
                       {
                        cat_id:2,
                        cat_level:2,
                        cat_name:"茶杯犬",
                        cat_pid:1,
                      },
                    ]

                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"德牧",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"边牧",
                    cat_pid:1
                  },
                    {
                    cat_id:2,
                    cat_level:1,
                    cat_name:"格斗犬",
                    cat_pid:1
                  },
                ]
              }
            ]
            this.total=res.data.total
        },
        handleSizeChange(newsize){
            this.queryInfo.pagesize=newsize
            this.getCatesList()
        },
        handleCurrentChange(current){
            this.queryInfo.pagenum=current
            this.getCatesList()
        },
       async showAddDialog(){
           this.getParentCatesList();
          
           this.dialogAddFormVisible=true
        },
     async getParentCatesList(){
          const {data:res}=await request({url:'/categories',method:'get',params:{type:2}});
           if(res.meta.status==200){
               this.parentCatesList=res.data
                console.log(res.data)
           }
     },
       parentCateChange(){
    
             console.log(this.selectedKeys)
      // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
      // 反之，就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.addCateForm.cat_pid = this.selectedKeys[
          this.selectedKeys.length - 1
        ]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
        return
      } else {
        // 父级分类的Id
        this.addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = 0
      }
     },
    addCate(){
        this.$refs.addCateFormRef.validate(async valid=>{
            if(!valid){
                return this.$message.error("添加商品分类失败！")
            }
            else{
                const {data:res}=await request({url:'/categories',method:'post',
                data:this.addCateForm})
                if(res.meta.status!=201){
                    return this.$message.error("添加商品分类失败！")
                }
                else{
                    this.$message.success("添加成功！")
                    this.getCatesList()
                    this.dialogAddFormVisible=false
                }
            }
        })
     },
     clearAddForm(){
         this.$refs.addCateFormRef.resetFields();
         this.selectedKeys=[];
         this.addCateForm.cat_pid=0;
         this.addCateForm.cat_level=0;
     }
    }
    }
</script>

<style lang='less' scoped>
.treeTable {
  margin-top: 15px;
}
.el-cascader {
  width: 100%;
}
</style>